<template>
    <span class="price-container">
        <slot name="currency"><span class="price-currency">￥</span></slot>
        <span class="price-integer" v-if="isInteger" :style="{'font-size': intSize}">{{ratePrice}}</span>
        <template v-else>
            <span class="price-int" :style="{'font-size': intSize}">{{ priceInt }}</span>
            <span class="price-float" :style="{'font-size': floatSize}">{{ priceFloat }}</span>
        </template>
    </span>
</template>

<script>
export default {
    name: 'price',
    props: {
        amount: Number,
        intSize: String, // 整型部分字体大小
        floatSize: String // 小数部分字体大小
    },
    computed: {
        isInteger() {
            return Number.isInteger(this.ratePrice);
        },
        ratePrice() {
            return this.amount / 100;
        },
        floatPrice() {
            return this.ratePrice.toFixed(2);
        },
        priceInt() {
            return this.floatPrice && this.floatPrice.slice(0, -3);
        },
        priceFloat() {
            return (this.floatPrice >= 0 && this.floatPrice.slice(-3)) || "";
        },
    },
};
</script>

<style lang="scss" scoped>
.price-container {
    color: #ff5429;
    font-weight: 500;
}

.price-integer,
.price-int {
    font-size: .48rem;
}

.price-currency,
.price-float {
    font-size: .24rem;
}
</style>